{# 继承基类 #}
{%  extends 'base/front_base.html' %}
{% load news_filters %}
{# 加载时间过滤器，用于页面时间的显示样式 #}
{% block title %}
    achjiang网站首页
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/news/news.css' %}">
    {# 轮播图功能代码需要引入的bootstrap.min.js和bootstrap.min.css #}
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/base/side.css' %}">
{#  引入arttemplat  #}
    <script src="{% static 'js/template-web.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>

    <script id="news-item" type="text/html">
    {# 该标签是django标签，用于指示包裹的文件不处理，只作为字符串 #}
        {% verbatim %}
        {{ each newses news index }}
            <li>
                <div class="thumbnail-group">
                    <a href="/detail/{{ news.id }}">
                        <img src="{{ news.thumbnail }}" alt="">
                    </a>
                </div>
                <div class="news-group">
                    <div class="title">
                        <a href="/detail/{{ news.id }}">{{ news.title }}</a>
                    </div>
                    <p class="desc">{{ news.desc }}</p>
                    <div class="news-more-group">
                        <span class="category">{{ news.category.name }}</span>
                        <span class="pub-time">{{ news.pub_time|timeSince }}</span>
                        <span class="author">{{ news.author.username }}</span>

                    </div>
                </div>
            </li>
        {{ /each }}
        {% endverbatim %}
    </script>

{% endblock %}

{% block main %}
       <div class="main">
        <div class="main-container">
            <div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
  <!-- Indicators 表示的是下面的小点点，轮播图下面的小点点必须和轮播图的数量保持一致 -->
              <ol class="carousel-indicators">
              {# 遍历轮播图 #}
                  {% for banner in banners %}
                      {# 判断轮播图下标是否是0，如果是0，只显示一个，否则，显示多个 #}
                      {% if forloop.counter0 == 0 %}
                          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                      {% else %}
                          <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
                      {% endif %}
                  {% endfor %}
{# 删除以前写死的代码 #}
{#                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>#}
{#                <li data-target="#carousel-example-generic" data-slide-to="1"></li>#}

              </ol>

              <!-- 轮播图 -->
              <div class="carousel-inner" role="listbox">
              {# 遍历轮播图 #}
                  {% for banner in banners %}
                      {# 判断遍历的轮播图个数，如果序号为1，则只显示一个，否则，按照遍历的序号显示 #}
                      {% if forloop.counter0 == 0%}
                          <div class="item active">
                       {% else %}
                          <div class="item">
                      {% endif %}
                      {# 加入target属性就可以使得点击a标签时，在一个新的页面打开a标签 #}
                        <a href="{{ banner.link_to }}" target="_blank">
                            <img src="{{ banner.image_url }}" alt="...">
                        </a>
                  </div>
                  {% endfor %}
{# 写死的代码删除掉 #}
{#                <div class="item active">#}
{#                  <img src="https://static-image.xfz.cn/1528792421_261.jpg" alt="...">#}
{#                </div>#}
{#                <div class="item">#}
{#                  <img src="https://static-image.xfz.cn/1528448527_528.jpg" alt="...">#}
              </div>

              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>

            {# news主体部分 #}
            <div class="list-outer-group">
                <ul class="list-tab-group">
{#  class="active" 是默认选中状态   #}
                    <li class="active" data-category-id="0"><a href="javascript:void (0);">最新文章</a></li>
                    {% for category in categories  %}
                        <li data-category-id="{{ category.pk }}"><a href="javascript:void (0);">{{ category.name }}</a></li>
                    {% endfor %}

                </ul>
            </div>
            <ul class="news-list-group">
                {% for news in newses %}
                    <li>
                     <div class="thumbnail-group">
                         <a href="{% url 'news:news_detail' news_id=news.pk %}">
                             <img src="{{ news.thumbnail }}" alt="">
                         </a>
                     </div>
                    <div class="news-group">
                        <div class="title">
                            <a href="{% url 'news:news_detail' news_id=news.pk %}">{{ news.title }}</a>
                        </div>
                        <p class="desc">{{ news.desc }}</p>
                        <div class="news-more-group">
                            <span class="category">{{ news.category.name }}</span>
                            <span class="pub-time">{{ news.pub_time | time_since}}</span>
                            {# 加入time_since这样在调用时，将pub_time传给time_since #}
                            <span class="author">{{ news.author.username }}</span>

                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
            <div class="load-more-group">
                <button class="load-more-btn" data-page="2">
                    加载更多
                </button>
            </div>
        </div>
        <div class="sidebar-container">
            {% include 'base/side.html' %}
        </div>
    </div>
{% endblock %}